import React, { Component } from 'react';
import 'antd/dist/antd.css'
import { Input,Button,List  } from 'antd'
import axios from 'axios'
// class TodoListUi extends Component {
//     // 没有业务逻辑就是无状态组件，是一个函数。不用Component
//     render() { 
//         return ( 
//             <div style={{margin:'10px'}}>
//             <div>
//                 <Input placeholder='Write something' style={{ width:'250px', marginRight:'10px'}} onChange={this.props.changeInputValue} value={this.props.inputValue}/>
//                 <Button type="primary" onClick={this.props.clickBtn}>增加</Button>
//             </div>
//             <div style={{margin:'10px',width:'300px'}}>
//                 {/* 需要注意的是在List组件的删除功能,需要用箭头函数的形式，代替以前方法，并在箭头函数里使用属性的方法，调用出啊你过来的方法。直接调用props报错【是因为多次调用呢】 */}
//                 {/* bug:删除出现问题始终删除第一个， index被打印个事件对象重新申明了。并没有利用到前面的index是灰色，不是index */}
//                     <List
//                         bordered
//                         dataSource={this.props.list}
                       
//                         renderItem={(item,index)=>(<List.Item onClick={()=>{ this.props.deleteItem(index)}}>{item}</List.Item>)}
//                     />    
//                 </div>
//         </div>
//          );
//     }
// }
// 无状态组件。可以不引人component
const TodoListUi=(props)=>{
    return ( 
        <div style={{margin:'10px'}}>
        <div>
            <Input placeholder='Write something' style={{ width:'250px', marginRight:'10px'}} onChange={props.changeInputValue} value={props.inputValue}/>
            <Button type="primary" onClick={props.clickBtn}>增加</Button>
        </div>
        <div style={{margin:'10px',width:'300px'}}>
            {/* 需要注意的是在List组件的删除功能,需要用箭头函数的形式，代替以前方法，并在箭头函数里使用属性的方法，调用出啊你过来的方法。直接调用props报错【是因为多次调用呢】 */}
            {/* bug:删除出现问题始终删除第一个， index被打印个事件对象重新申明了。并没有利用到前面的index是灰色，不是index */}
                <List
                    bordered
                    dataSource={props.list}
                   
                    renderItem={(item,index)=>(<List.Item onClick={()=>{ props.deleteItem(index)}}>{item}</List.Item>)}
                />    
            </div>
    </div>
     );
}
export default TodoListUi;